// 获取元素
var oWrap = document.querySelector('.wrap');
var oSamllBox = document.querySelector('.smallBox'); //小图
var oMove = document.querySelector('.move'); //镜片
var oDisBox = document.querySelector('.displayBox'); //显示器
var oBigImg = document.querySelector('.bigImg'); //大图
//第一步：求镜片大小
//1.求宽高整体放大倍数
var rateW = oBigImg.clientWidth / oSamllBox.clientWidth;
var rateH = oBigImg.clientHeight / oSamllBox.clientHeight;
//2.根据整体放大倍数=局部放大倍数
// 局部放大倍数=显示器宽/镜片宽 = rateW
var moveW = oDisBox.clientWidth / rateW;
var moveH = oDisBox.clientHeight / rateH;
oMove.style.width = moveW + 'px';
oMove.style.height = moveH + 'px';
//放大镜效果
oSamllBox.onmouseover = function() {
    oMove.style.display = 'block';
    var w = oSamllBox.clientWidth - oMove.offsetWidth;
    var h = oSamllBox.clientHeight - oMove.offsetHeight;
    oSamllBox.onmousemove = function(e) {
        var ev = e || window.event;
        var l = ev.clientX - oWrap.offsetLeft - moveW / 2 - 3;
        var t = ev.clientY - oWrap.offsetTop - moveH / 2 - 3;
        //限制范围
        l = l < 0 ? 0 : (l > w ? w : l);
        t = t < 0 ? 0 : (t > h ? h : t);
        //镜片移动
        oMove.style.left = l + 'px';
        oMove.style.top = t + 'px';
        //设置大图移动的距离
        oBigImg.style.left = -l * rateW + 'px';
        oBigImg.style.top = -t * rateH + 'px';
    };
    //移出盒子 镜片隐藏
    oSamllBox.onmouseout = function() {
        oSamllBox.onmousemove = null;
        oMove.style.display = 'none';
    };
}